<template>
  <el-card class="app-container">
    <div class="flex search">
      <div class="flex-con" style="margin-bottom: -10px">
        <el-form label-position="right" inline label-width="100px" size="mini">
          <el-form-item label="旺旺号" @keydown.native.enter="handleSearchKeyDown">
            <el-input type="textarea" style="width: 300px" :rows="4" v-model="searchForm.wangwangList"
                      placeholder="旺旺号,多个可以换行或者逗号"
            />
          </el-form-item>
          <el-form-item label=" ">
            <el-button
              size="mini"
              type="primary"
              @click="handleSearch"
            >搜索
            </el-button>
            <el-button
              size="mini"
              style="margin-right:10px"
              @click="handleResetTable()"
            >重置
            </el-button
            >
          </el-form-item>

        </el-form>
      </div>
    </div>
    <div style="padding-top: 20px">
      <el-table
        :data="clickFarmList"
        border
        header-row-class-name="table-header-row"
        stripe
        style="width: 100%"
        size="mini"
      >
        <el-table-column
          prop="wangWangNo"
          label="旺旺号"
          width="180"
        />
        <el-table-column
          prop="status"
          label="状态"
          width="180"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" type="success">可用</el-tag>
            <el-tag v-else-if="scope.row.status === 0" type="danger">不可用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="desc"
          label="不可用原因"
          width="180"
        />
        <!--        <el-table-column-->
        <!--          prop="gmtCreate"-->
        <!--          label="创建时间"-->
        <!--          width="180"-->
        <!--        />-->
        <!--        <el-table-column-->
        <!--          prop="gmtModified"-->
        <!--          label="修改时间"-->
        <!--          width="180"-->
        <!--        />-->
      </el-table>
    </div>
  </el-card>
</template>

<script>
import { clickFarmApi } from '@/feature/cmt/infra/api/clickFarmApi'

export default {
  data() {
    return {
      searchForm: {
        wangwangList: ''
      },
      clickFarmList: []
    }
  },
  methods: {
    handleSearchKeyDown(event) {
      if (event.keyCode === 13) {
        this.handleSearch()
      }
    },
    handleSearch() {
      clickFarmApi.listCanClickFarm(this.searchForm.wangwangList).then(res => {
        this.clickFarmList = res
      })
    },
    handleResetTable() {
      this.searchForm = {
        wangwangList: ''
      }
    }
  }
}
</script>

<style scoped>

</style>
